<%--
Created by IntelliJ IDEA.
User: wang
Date: 2021/3/16/016
Time: 18:36
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%--添加标签库--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<%--在作用域中保存一个当前路径参数ctx--%>
<c:set value="${pageContext.request.contextPath}" var="ctx"/>
<div class="providerAdd">
    <div class="location">
        <strong>你现在所在的位置是:</strong>
        <span>用户修改页面</span>
    </div>

    <%--<h1>
        ${userRoleList}
    </h1>--%>
    <form action="#" id="userUpdateForm" method="post">
        <!--div的class 为error是验证错误，ok是验证成功-->
        <input type="hidden" name="id" value="${userUpdate.id}">

        <div>
            <label for="userName">用户名称：</label>
            <input type="text" name="userName" id="userName" value="${userUpdate.userName}"/>
            <span id="sp1"></span>
        </div>

        <div>
            <label>用户性别：</label>
            <select name="gender" id="gender">
                <option value="1" <c:if test="${userUpdate.gender==1}">selected</c:if>>女</option>
                <option value="2" <c:if test="${userUpdate.gender==2}">selected</c:if>>男</option>
            </select>
            <span id="sp2"></span>
        </div>
        <div>
            <label for="data">出生日期：</label>
            <input type="date" name="birthday" id="data"
                   value="<fmt:formatDate value='${userUpdate.birthday}' pattern="yyyy-MM-dd"/>"/>
            <span id="sp3"></span>
        </div>
        <div>
            <label for="userphone">用户电话：</label>
            <input type="text" name="phone" id="userphone" value="${userUpdate.phone}"/>
            <span id="sp4"></span>
        </div>
        <div>
            <label for="userAddress">用户地址：</label>
            <input type="text" name="address" id="userAddress" value="${userUpdate.address}"/>
            <span id="sp5"></span>
        </div>
        <div>
            <label>用户类别：</label>
            <select name="userRole" id="userRole">
                <c:if test="${user.id==userUpdate.id}">

                    <option value="${userUpdate.id}">${userUpdate.userRoleName}</option>

                </c:if>
                <c:if test="${user.id!=userUpdate.id}">
                    <c:forEach items="${userRoleList}" var="role">
                        <c:if test="${user.userRole<role.id}">
                            <option value="${role.id}"
                                    <c:if test="${userUpdate.userRole==role.id}">selected</c:if>
                            >${role.roleName}</option>
                        </c:if>
                    </c:forEach>
                </c:if>
            </select>
            <span id="sp6"></span>


        </div>
        <div class="providerAddBtn">
            <!--<a href="#">保存</a>-->
            <!--<a href="userList.jsp">返回</a>-->
            <input type="button" value="保存" id="btn"/>
            <input type="button" value="返回" onclick="location.href='${ctx}/user/userList'"/>
        </div>
    </form>
</div>

<%--修改用户--%>
<script type="text/javascript">
    $(function () {
        $("#btn").click(function () {
            var flag1 = false;
            var flag2 = false;
            var flag3 = false;
            var flag4 = false;
            var flag5 = false;
            var flag6 = false;

            //电话号码正则表达式
            var regexPhone = /^(((13[0-9]{1})|(14[0-9]{1})|(17[0]{1})|(15[0-3]{1})|(15[5-9]{1})|(18[0-9]{1}))+\d{8})$/;

            //表单信息提交验证
            if ($("#userName").val() == null || $("#userName").val() == "" || $("#userName").val() == "null") {
                $("#sp1").html("用户名不能为空或null").css("color", "red");
            } else if ($("#userName").val() == "${userUpdate.userName}") {
                $("#sp1").html("用户名未做修改").css("color", "green");
                flag1 = true;
            } else {
                var userList =${userList};
                var flag = false;
                for (var i in userList) {
                    if (userList[i].userName == $("#userName").val()) {
                        flag = true;
                        break;
                    }
                }
                if (flag) {
                    $("#sp1").html("该用户名已存在!").css("color", "red");
                } else {
                    $("#sp1").html("该用户名符合条件").css("color", "green");
                    flag1 = true;
                }
            }

            if ($("#gender").val() == null || $("#gender").val() == "" || $("#gender").val() == "null") {
                $("#sp2").html("请选择用户性别").css("color", "red");
            } else {
                $("#sp2").html("用户性别符合条件").css("color", "green");
                flag2 = true;
            }

            if ($("#data").val() == null || $("#data").val() == "" || $("#data").val() == "null") {
                $("#sp3").html("请选择出生日期").css("color", "red");
            } else {
                $("#sp3").html("出生日期符合条件").css("color", "green");

                flag3 = true;
            }

            if ($("#userphone").val() == null || $("#userphone").val() == "" || $("#userphone").val() == "null") {
                $("#sp4").html("用户电话不能为空或null").css("color", "red");
            } else if (!regexPhone.test($("#userphone").val())) {
                $("#sp4").html("用户电话不符合条件！").css("color", "red");
            } else {
                $("#sp4").html("用户电话符合条件").css("color", "green");

                flag4 = true;
            }

            if ($("#userAddress").val() == null || $("#userAddress").val() == "" || $("#userAddress").val() == "null") {
                $("#sp5").html("用户地址不能为空或null").css("color", "red");
            } else {
                $("#sp5").html("用户地址符合条件").css("color", "green");

                flag5 = true;
            }
            if ($("#userRole").val() == null || $("#userRole").val() == "" || $("#userRole").val() == "null") {
                $("#sp6").html("请选择用户类型").css("color", "red");
            } else {
                $("#sp6").html("用户类型符合条件").css("color", "green");

                flag6 = true;
            }


            if (flag1 && flag2 && flag3 && flag4 && flag5 && flag6) {
                var data = $("#userUpdateForm").serialize();
                //alert(data);
                $.post(
                    ctx + "/user/userUpdate",
                    data,
                    function (result) {
                        //alert(result);
                        if (result > 0) {
                            alert("修改成功！");
                            location.href = "${ctx}/user/userList";
                        } else {
                            alert("修改失败！");
                        }

                    }
                );
            } else {
                alert("请根据页面提示完善提交信息！");
            }
        });
    });
</script>


